iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0

從 2018 年介紹 Vue 的 UI Framework — Quasar ,到前年的 LINE Bot。
每年鐵人賽都剛好是工作最繁忙的下半年,希望下次能辦在上半年啊啊啊~ 不然每天晚上都被文章追著跑 QAO
不過今年學乖了,早在看到 iThome 貼出鐵人賽開放報名的同時,這篇文章就已經誕生啦 XDD !!

前言

Livewire 在業界的定位可能會有點奇怪,以往用 PHP 做開發的軟體公司或是接案公司,基本上只會有 後端工程師網頁設計師
,後端工程師除了要把設計師寫的 HTML、CSS、JS 套到 Laravel 的 blade 內之外也要把畫面上要顯示的資料套進頁面中,幾乎可以說在資料處理方面是自產自銷。

在 Vue 開發為主的公司都是由 前端工程師 來負責整個頁面的資料佈局,後端工程師 只需要負責寫各種前端所需的 API 而不會直接接觸前端頁面的東西,至此兩者就有蠻大的差異。而 Livewire 把原本 前端工程師 要做的事通通都實現在 Laravel 上了。那究竟多了 Livewire 的專案,在頁面的部分依舊是由後端全包,還是會就此前後端分離呢?

主題與方向

這次的主題將會逐步介紹 Laravel Livewire 的基礎用法、相關應用還有與 Vue.js 的語法比較,預計會有二至四個實作的範例,也會上傳 github 方便大家能夠邊看邊做,每篇文章閱讀時長會控制在5分鐘內。

有興趣可以先去 Livewire的官方網站 晃晃啦! 未來大致上也會依照官方文件來做解說及擴充,畢竟文件很多部分都忽略了細節,當初在寫也是把坑踩好踩滿...。

適合的閱讀對象

使用過 LaravelVue.js 的工程師們。

都沒接觸過的夥伴也沒關係,在內容中也會盡量避免使用到一些複雜或困難的語法。

其實 Livewire 頗尷尬,因為它的語法基本上都是接近 Vue 的邏輯,但拉資料時卻又要會基礎的 Laravel

所以說,到底有多少人寫 Laravel 的同時又寫過 Vue ?


範例與練習

練習與實作是學習最快的方法,因此在 Day5 之後會有一些範例提供大家實際去操作。有些天數底下也會有小習題能夠讓各位小試身手。不過裡面進度還是看到文章寫到哪邊就是了~

GitHub 連結在這邊


目次

這是目前擬定未來30天會寫的進度,不過根據情況可能會有加減天數或是調整內容也說不定
如果您對以下進度或文章的方向有任何想法都歡迎敲碗及討論哦

Livewire 基礎

Livewire 元件狀態

常用功能範例

實作一、建立一個 TodoList 待辦事項

實作二、建立一個購物網站

Livewire 類 Vue 風格擴充 - AlpineJS

Livewire 常見問題,絕對不是見鬼了!

其他

  • Day29 - 使用 Livewire 會踩到的坑

作者的話

以前接觸到 Vue.js 後,發現用數據控制頁面的體驗實在太棒了,光是不用操作 jQuery 去手動改 DOM 就是很棒的事。於是往後幾年的日子中,我基本沒再用 Laravel 來寫過前端頁面,寧願弄成前後端分離,也要用 Vue + Laravel API 來做網站與系統。

而碰過 Livewire 之後,我想我在 Vue.js 的旅程可以畫下終點了。畢竟現在能夠滿足我在 Vue 上的需求,而且也不用因為前後分離所以 Route 跟 Model 都要前後各寫一次,雖然 Laravel 要完全變成 SPA 還要額外透過一些套件,但其實以現階段的情況來做各式系統與網站就已經非常足夠啦!!!應該說,除了開發者,有誰會在意是不是 SPA,哈哈哈哈!


下一篇
Day 02 | Laravel Livewire 基本介紹
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言